<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Slider Visual Test : Slider option animate true</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"
	type="text/css">
<script type="text/javascript" src="../../../jquery-1.8.2.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>

<style type="text/css">
fieldset {
	padding: 1em;
	margin: 1em;
}

legend {
	font-size: 1.3em;
	font-family: monospace;
	font-weight: bold;
}

#slider1 {
	margin: 1em;
}

#slider2 {
	margin: 1em;
	height: 400px;
}
</style>

<script type="text/javascript">
	$(function() {
		$("#slider1").slider({
			animate: true,
			step: 10
		});
		$("#slider2").slider({
			animate: true,
			orientation: 'vertical',
			step: 5,
			values: [5, 15, 35, 75]
		});
	});
	</script>
</head>
<body>

	<fieldset>
		<legend>$("#slider1").slider({ animate: true, step: 10 });</legend>
		<div id="slider1"></div>
		<button onclick="$('#slider1').slider('value', 15);">method
			value: 15</button>
		<button onclick="$('#slider1').slider('value', 75);">method
			value: 75</button>
		<button onclick="$('#slider1').slider('option', 'value', 25);">option
			value: 25</button>
		<button onclick="$('#slider1').slider('option', 'value', 85);">option
			value: 85</button>
	</fieldset>

	<fieldset>
		<legend>$("#slider2").slider({ animate: true, orientation:
			'vertical', step: 5, values: [5, 15, 35, 75] });</legend>
		<div id="slider2"></div>
		<button onclick="$('#slider2').slider('values', [10, 20, 30, 40]);">method
			values: [10, 20, 30, 40]</button>
		<button onclick="$('#slider2').slider('values', [80, 70, 60, 50]);">method
			values: [80, 70, 60, 50]</button>
		<button
			onclick="$('#slider2').slider('option', 'values', [20, 30, 40, 50]);">option
			values: [20, 30, 40, 50]</button>
		<button
			onclick="$('#slider2').slider('option', 'values', [90, 80, 70, 60]);">option
			values: [90, 80, 70, 60]</button>
	</fieldset>

</body>
</html>
